//引入模块
const path = require('path'),
  webpack = require('webpack'),
  uglify = require('uglifyjs-webpack-plugin'),
  //压缩html
  htmlWebpackPlugin = require('html-webpack-plugin'),
  //前缀
  autoprefixer = require('autoprefixer'),
  //每次打包删除dist目录下的某些文件
  cleanWebpackPlugin = require('clean-webpack-plugin');

//配置
const config = {
  mode: 'development',
  //多入口，找js文件
  entry: {
    //列表/详情/购物车管理页面
    index: path.resolve(__dirname, './src/js/index.js'),
    detail: path.resolve(__dirname, './src/js/detail.js'),
    cart: path.resolve(__dirname, './src/js/cart.js')
  },
  //输出文件 打包到哪个文件里
  output: {
    path: path.resolve(__dirname + '/dist'),
    //指定文件名称 固定js目录 名称+哈希.js
    filename: 'js/[name]-[hash].js'
  },
  //配置模块
  module: {
    rules: [
      //处理规则
      {
        //处理所有js文件
        test: /\.js$/,
        //es6转es5
        loader: 'babel-loader',
        //除了
        exclude: path.resolve(__dirname, 'node_modules'),
        //参数
        query: {
          //最近版本
          "presets": ["latest"]
        }
      },
      {
        test: /\.tpl$/,
        //ejs模板
        loader: 'ejs-loader'
      },
      {
        test: /\.css$/,
        use: [{
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              //兼容每个浏览器最近的版本
              plugins: function () {
                return [autoprefixer('last 5 versions')];
              }
            }
          }
        ]
      },
      {
        test: /\.scss$/,
        use: [{
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              //兼容每个浏览器最近的版本
              plugins: function () {
                return [autoprefixer('last 5 versions')];
              }
            }
          },
          {
            loader: 'sass-loader'
          }
        ]
      },
      //处理图片
      {
        test: /\.(png|jpg|jpeg|gif|ico)$/i,
        loader: [
          //名称+哈希+自己的后缀
          'url-loader?limit=1024&name=img/[name]-[hash:16].[ext]',
          //压缩图片
          'image-webpack-loader'
        ]
      }
    ]
  },
  //插件
  plugins: [
    //压缩js文件
    new uglify(),
    //可以配置多个页面，目前只配置单页面
    new htmlWebpackPlugin({
      //配置压缩html
      minify: {
        //去掉注释
        removeComments: true,
        //去掉回车/空白
        collapseWhitespace: true
      },
      //配置打包好的名称
      filename: 'index.html',
      //配置模板
      template: path.resolve(__dirname, 'src/index.html'),
      //标题
      title: '商品列表',
      //忽略模块
      excludeChunks: ['node_modules'],
      //带有什么模块
      //引入打包后的index模块
      chunks: ['index'],
      //带有hash
      hash: true
    }),
    new htmlWebpackPlugin({
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      filename: 'detail.html',
      template: path.resolve(__dirname, 'src/detail.html'),
      title: '商品详情页',
      chunksSortMode: 'manual',
      excludeChunks: ['node_modules'],
      chunks: ['detail'],
      hash: true
    }),
    new htmlWebpackPlugin({
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      filename: 'cart.html',
      template: path.resolve(__dirname, 'src/cart.html'),
      title: '商品购物车',
      chunksSortMode: 'manual',
      excludeChunks: ['node_modules'],
      chunks: ['cart'],
      hash: true
    }),
    //打包前删除一些文件资源
    new cleanWebpackPlugin({
      //编译之前清除一次
      cleanOnceBeforeBuildPatterns: ['dist/js', 'dist/*.html']
    })
  ],
  //开启服务器热更新
  devServer: {
    //监听选项
    watchOptions: {
      //忽略
      ignored: /node_modules/
    },
    host: 'localhost',
    port: 3300
  }
}


module.exports = config;